<template>
  <div class='check-item-container'>
    <el-form :model="requestParam"
             label-width="100px">
      <el-row class="request-header dm-form">
        <el-col :lg="{span:3}"
                :md="{span:3}"
                :sm="{span:5}"
                :xs="{span:24}">
          <el-button @click="editItem('create',{})"
                     type="primary">添加{{text}}</el-button>
        </el-col>

        <el-col :lg="{span:12,offset:4}"
                :md="{span:12,offset:3}"
                :sm="{span:10,offset:1}"
                :xs="{span:24}"
                class="align-right">
          <el-form-item prop="check_item_name"
                        :label="text+'名称'">
            <el-input v-model="requestParam.check_item_name"
                      :placeholder="'请输入'+text+'名称'"></el-input>
          </el-form-item>

        </el-col>
        <el-col :lg="{span:4,offset:1}"
                :md="{span:6}"
                :sm="{span:8}"
                :xs="{span:24}"
                class="flex-end">
          <el-button @click="search"
                     type="primary">搜索</el-button>
          <el-button @click="reset">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="checkItemList.list"
              height="600"
              :header-cell-style="{background:'#f5f5f5'}">
      <el-table-column type="index"
                       label="序号">
      </el-table-column>
      <el-table-column prop="check_item_name"
                       :label="text+'名称'">
      </el-table-column>
      <el-table-column prop="config_num"
                       label="配置数量">
      </el-table-column>
      <el-table-column prop="updated_at"
                       label="更新时间">
      </el-table-column>
      <el-table-column prop="remark"
                       label="备注">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="configCheckItem(scope.row)"
                     type="text">配置</el-button>
          <el-button @click="editItem('update',scope.row)"
                     type="text">修改</el-button>
          <el-button @click="deleteItem(scope.row)"
                     type="text">删除</el-button>
        </template>

      </el-table-column>
    </el-table>
    <el-pagination @current-change="handlePageChange"
                   @size-change="handleSizeChange"
                   :current-page="requestParam.page"
                   :page-size="requestParam.page_size"
                   layout="total,sizes,prev, pager, next, jumper"
                   background
                   :total="checkItemList.total_count"
                   align="center">
    </el-pagination>
    <EditCheckItemDialog :dialogVisible.sync="editItemDialogVisible"
                         :dialogStatus="editItemDialogStatus"
                         :dialogForm="editItemDialogForm"
                         @callback="editItemCb"></EditCheckItemDialog>
  </div>
</template>
<script>
import EditCheckItemDialog from './components/EditCheckItemDialog'
import { CommonCheckApi } from '@/services/SystemSetting'
export default {
  data () {
    return {
      // 请求检查项列表参数
      requestParam: {
        check_item_name: '',
        is_page: 1,
        page: 1,
        page_size: 10
      },
      resetParam: {
        check_item_name: '',
        is_page: 1,
        page: 1,
        page_size: 10
      },
      // 检查项列表
      checkItemList: {
        list: [],
        page: 1,
        total_count: 10
      },
      // 编辑检查项弹框是否可见
      editItemDialogVisible: false,
      // 编辑检查项弹框状态
      editItemDialogStatus: 'create',
      // 编辑检查项弹框数据对象
      editItemDialogForm: {

      },
      // 按钮文字及表格文字区分，老页面为 检查项，新页面为 表单
      text: this.$route.meta.version === '1.2.2' ? '表单' : '检查项'
    }
  },
  components: {
    EditCheckItemDialog
  },
  watch: {
    '$route' (to, from) {
      // console.log(this.$route, 'routw')
      this.text = this.$route.meta.version === '1.2.2' ? '表单' : '检查项'
      this.getCheckItemList()
    }
  },
  methods: {
    handleSizeChange (size) {
      this.requestParam.page_size = size
      this.requestParam.page = 1
      this.getCheckItemList()
    },
    handlePageChange (page) {
      this.requestParam.page = page
      this.getCheckItemList()
    },
    search () {
      this.requestParam.page = 1
      this.getCheckItemList()
    },
    reset () {
      let reset = JSON.parse(JSON.stringify(this.resetParam))
      this.requestParam = Object.assign(this.requestParam, reset)
      this.getCheckItemList()
    },
    // 获取检查项列表
    getCheckItemList () {
      let version = this.$route.meta.version
      if (version === '1.2.2') {
        this.requestParam.item_type = '2,3'
      } else {
        this.requestParam.item_type = '1'
      }
      CommonCheckApi.getCheckItemList({
        params: this.requestParam
      }).then(res => {
        if (res.code === 0) {
          this.checkItemList = res.data
        }
      })
    },
    // 编辑检查项
    editItem (type, data) {
      this.editItemDialogStatus = type
      this.editItemDialogForm = data
      this.editItemDialogVisible = true
    },
    // 编辑检查项回调
    editItemCb () {
      this.getCheckItemList()
    },
    // 删除检查项确认
    deleteItem (item) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.deleteItemApi(item.check_item_id)
        })
        .catch(() => {

        })
    },
    // 删除检查项api
    deleteItemApi (id) {
      CommonCheckApi.deleteCheckItem({
        data: {
          check_item_id: id
        }
      }).then(res => {
        if (res.code === 0) {
          this.$message.success('删除检查项成功')
          this.getCheckItemList()
        }
      })
    },
    // 配置检查项
    configCheckItem (row) {
      // 1.2.2版本表单配置与原来的检查项配置共用一个页面，判断路由为checkFormList时跳转到新页面，否则到老页面
      let version = this.$route.meta.version
      if (version === '1.2.2') {
        this.$router.push({
          path: '/configCheckForm',
          query: {
            id: row.check_item_id,
            name: row.check_item_name,
            is_gcy: row.is_gcy,
          }
        })
      } else {
        this.$router.push({
          path: '/configCheckItem',
          query: {
            id: row.check_item_id,
            name: row.check_item_name
          }
        })
      }

    }
  },
  created () {//dom渲染前执行
    this.getCheckItemList()
  },
  mounted () {//dom渲染后执行
  }
}
</script>
<style scoped lang='scss'>
.check-item-container {
  padding: 20px;

  .el-pagination {
    margin-top: 20px;
  }
}
</style>